<template>
  <!-- banner begin -->
  <div class="banner">
    <!-- <app-header></app-header> -->
    <div class="banner-header">aaa</div>
    <div class="banner-main">
      <div
        style="
          font-family: 'Arial Negreta', 'Arial';
          font-weight: 700;
          font-size: 65px;
          color: #f9bc02;
        "
      >
        职场"王者"都在用的专业简历工具
      </div>
      <div
        style="
          font-family: '微软雅黑 Bold', '微软雅黑';
          font-weight: 700;
          font-size: 20px;
          color: #f9bc02;
        "
      >
        好用、简单的智能简历制作工具，抢先一步获取优秀简历，助你成功拿Offer
      </div>
      <div style="margin-top: 70px">
        <el-button type="primary" icon="el-icon-edit">在线制作简历</el-button>
      </div>
    </div>
    <div class="banner-footer">
      <el-row style="height: 100%">
        <el-col
          class="banner-footer-item"
          :span="6"
          v-for="(item, index) in 4"
          :key="`banner-footer-${index}`"
        >
          <p>
            <img
              width="20"
              height="20"
              style="vertical-align: middle"
              :src="require(`@/assets/images/home/bft-${item}.png`)"
            />
            <span style="font-size: 18px"> 专业</span>
          </p>
          <p style="font-size: 14px">上千精美模版，任你选择 {{ item }}</p>
        </el-col>
      </el-row>
    </div>
  </div>
  <!-- banner end -->

  <!-- online resume temp begin -->
  <div class="resume">
    <div class="resume-title">
      <div class="resume-title-line">
        <div class="resume-title-line-item"></div>
      </div>
      <div class="resume-title-text">
        <span>在线简历精美模版</span>
      </div>
      <div class="resume-title-line">
        <div class="resume-title-line-item"></div>
      </div>
    </div>
    <div class="resume-sub-title">
      <span
        >近10000+精美Word简历模版，任你本地下载！让你拥有自己的漂亮简历！</span
      >
    </div>

    <div class="resume-main">
      <div
        class="resume-main-item"
        v-for="(item, index) in 10"
        :key="`resume-${index}`"
      >
        <div class="resume-main-item-inner">
          <el-image
            class="resume-img"
            :src="require('@/assets/images/home/resume-temp.png')"
          ></el-image>

          <div class="resume-mask mask">
            <div class="resume-mask-btns">
              <div class="resume-mask-btn-wrapper">
                <el-button class="resume-mask-btn-view" type="primary"
                  >查看模板</el-button
                >
              </div>
              <div class="resume-mask-btn-wrapper">
                <el-button class="resume-mask-btn-edit" type="primary"
                  >立即使用模板</el-button
                >
              </div>
            </div>
            <div class="resume-mask-title">
              <span class="text-overflow">abcdefghijklmnopqrstuvwxyz</span>
            </div>
          </div>
        </div>
      </div>
      <el-button plain type="primary" style="margin: 0 auto"
        >更多在线简历模板>></el-button
      >
    </div>
  </div>
  <!-- online resume temp end -->

  <!-- word resume temp begin -->
  <div class="word">
    <div class="word-title">
      <div class="word-title-line">
        <div class="word-title-line-item"></div>
      </div>
      <div class="word-title-text">
        <span>Word简历模版</span>
      </div>
      <div class="word-title-line">
        <div class="word-title-line-item"></div>
      </div>
    </div>
    <div class="word-sub-title">
      <span
        >近10000+精美Word简历模版，任你本地下载！让你拥有自己的漂亮简历！</span
      >
    </div>

    <div class="word-main">
      <el-row class="word-wrapper" :gutter="40">
        <el-col
          class="word-main-item"
          :span="6"
          v-for="(item, index) in 10"
          :key="`resume-${index}`"
          ><div class="word-main-item-inner">
            <el-image
              class="word-img"
              :src="require('@/assets/images/home/word-temp.png')"
            ></el-image>

            <div class="word-mask mask">
              <div class="word-mask-btns">
                <div class="word-mask-btn-wrapper">
                  <el-button class="word-mask-btn-view" type="primary"
                    >查看/下载</el-button
                  >
                </div>
              </div>
              <div class="word-mask-title">
                <span class="text-overflow"
                  >一二三四五六七八九十十一十二十三十四十五十六</span
                >
              </div>
            </div>
          </div></el-col
        >
      </el-row>
    </div>

    <el-button plain type="primary">更多精美word简历模板>></el-button>
  </div>
  <!-- word resume temp end -->

  <!-- profession begin -->
  <div class="profession">
    <div class="profession-title">
      <div class="profession-title-line">
        <div class="profession-title-line-item"></div>
      </div>
      <div class="profession-title-text">
        <span>职业圈</span>
      </div>
      <div class="profession-title-line">
        <div class="profession-title-line-item"></div>
      </div>
    </div>
    <div class="profession-sub-title">
      <span
        >简历填写注意事项、面试小技巧、职场攻略、简历范文，先人一步获取！</span
      >
    </div>

    <div class="profession-main">
      <el-row class="profession-wrapper" :gutter="40">
        <el-col
          class="profession-main-item"
          :span="6"
          v-for="(item, index) in 4"
          :key="`profession-${index}`"
        >
          <div class="profession-main-item-inner">
            <div class="profession-item-header">
              <span class="profession-item-header-title">简历攻略</span>
              <span class="profession-item-header-line">|</span>
              <span class="profession-item-header-more hc">更多>></span>
            </div>

            <div v-for="o in 10" :key="o" class="profession-item-content">
              {{ "销售简历怎么写？需要注意的事项！我来告诉你～" }}
            </div>
          </div>
        </el-col>
      </el-row>
    </div>
  </div>
  <!-- profession end -->
</template>

<script lang="ts">
import { defineComponent, reactive, toRefs } from "vue";
import appHeader from "@/components/home/header.vue";

export default defineComponent({
  components: { appHeader },
  setup() {
    const state = reactive({
      logoUrl: require("@/assets/images/home/logo-header-light.png"),
      imgUrl: require("@/assets/images/home/banner.png"),
      qrcodeUrl: require("@/assets/images/home/qrcode.png"),
    });

    const handleSelect: any = (key: any, keyPath: any) => {
      console.log(key, keyPath);
    };

    return {
      ...toRefs(state),
      handleSelect,
    };
  },
});
</script>

<style lang="scss" scoped>
$opacity: 0 !default;

.text-overflow {
  display: block;
  width: 13em;
  word-break: keep-all;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  text-align: left;
}

.banner {
  color: #fff;
  text-align: center;
  width: 100%;
  height: 808px;
  background: url("../../assets/images/home/banner.png") no-repeat;
  background-size: 100% 100%;
  display: flex;
  display: -webkit-flex; /* Safari */
  flex-flow: column nowrap;
  justify-content: space-between;

  .banner-footer {
    height: 100px;
    background: rgba(0, 0, 0, 0.6);
  }
}

.mask {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.8);
  color: #ffffff;
  display: none;
  opacity: $opacity;
}

.resume {
  text-align: center;
  background-color: rgba(242, 242, 242, 1);
  padding: 20px 0;

  .resume-title {
    font-family: "Arial Negreta", "Arial";
    font-weight: 700;
    font-style: normal;
    font-size: 24px;
    color: #333333;
    line-height: normal;
    display: flex;
    display: -webkit-flex;
    flex-flow: row nowrap;
    justify-content: center;

    .resume-title-line {
      width: 200px;
      display: flex;
      display: -webkit-flex;
      flex-flow: column nowrap;
      justify-content: center;

      .resume-title-line-item {
        height: 1px;
        width: 100%;
        background-color: #f9bc02;
      }
    }

    .resume-title-text {
      padding: 0 20px;
    }
  }

  .resume-sub-title {
    font-family: "Arial Normal", "Arial";
    font-weight: 400;
    font-style: normal;
    font-size: 13px;
    line-height: normal;
    color: #868686;
    margin: 5px auto 42px auto;
  }

  .resume-main {
    padding: 0 60px;
    display: flex;
    display: -webkit-flex;
    flex-flow: row wrap;
    justify-content: space-between;

    .resume-main-item {
      width: 20%;
      padding: 0 20px 34px 20px;
      box-sizing: border-box;
      -moz-box-sizing: border-box;
      -webkit-box-sizing: border-box;

      .resume-main-item-inner {
        position: relative;
        height: 100%;

        .resume-img {
          height: 100%;
        }

        .resume-mask {
          display: flex;
          flex-flow: column nowrap;
          justify-content: space-between;

          .resume-mask-btns {
            display: flex;
            flex-flow: column nowrap;
            justify-content: center;
            height: 100%;

            .resume-mask-btn-wrapper {
              margin: 13px;

              .resume-mask-btn-view,
              .resume-mask-btn-edit {
                width: 50% !important;
                height: 30px !important;
                padding: 0 !important;
              }
            }
          }

          .resume-mask-title {
            font-size: 14px;
            padding: 0 2px;
          }
        }
      }

      .resume-main-item-inner:hover .mask {
        opacity: 0.9;
      }
    }
  }
}

.word {
  text-align: center;
  background-color: rgba(228, 228, 228, 1);
  padding: 60px 0 30px 0;

  .word-title {
    font-family: "Arial Negreta", "Arial";
    font-weight: 700;
    font-style: normal;
    font-size: 24px;
    color: #333333;
    line-height: normal;
    display: flex;
    display: -webkit-flex; /* Safari */
    flex-flow: row nowrap;
    justify-content: center;

    .word-title-line {
      width: 200px;
      display: flex;
      display: -webkit-flex; /* Safari */
      flex-flow: column nowrap;
      justify-content: center;

      .word-title-line-item {
        height: 1px;
        width: 100%;
        background-color: #f9bc02;
      }
    }

    .word-title-text {
      padding: 0 20px;
    }
  }

  .word-sub-title {
    font-family: "Arial Normal", "Arial";
    font-weight: 400;
    font-style: normal;
    font-size: 13px;
    line-height: normal;
    color: #868686;
    margin: 5px auto 42px auto;
  }

  .word-main {
    padding: 0 80px;

    .word-wrapper {
      .word-main-item {
        padding-bottom: 32px;

        .word-main-item-inner {
          height: 100%;
          position: relative;

          .word-img {
            height: 100%;
          }

          .word-mask {
            display: flex;
            flex-flow: column nowrap;
            justify-content: space-between;

            .word-mask-btns {
              display: flex;
              flex-flow: column nowrap;
              justify-content: center;
              height: 100%;

              .word-mask-btn-wrapper {
                margin: 13px;

                .word-mask-btn-view {
                  width: 100px !important;
                  height: 30px !important;
                  // min-height: 30px !important;
                }
              }
            }

            .word-mask-title {
              font-size: 14px;
              padding: 0 2px;
            }
          }
        }

        .word-main-item-inner:hover .mask {
          opacity: 0.9;
        }
      }
    }
  }
}

.profession {
  text-align: center;
  background-color: rgba(242, 242, 242, 1);
  padding: 60px 0 30px 0;

  .profession-title {
    font-family: "Arial Negreta", "Arial";
    font-weight: 700;
    font-style: normal;
    font-size: 24px;
    color: #333333;
    line-height: normal;
    display: flex;
    display: -webkit-flex; /* Safari */
    flex-flow: row nowrap;
    justify-content: center;

    .profession-title-line {
      width: 200px;
      display: flex;
      display: -webkit-flex; /* Safari */
      flex-flow: column nowrap;
      justify-content: center;

      .profession-title-line-item {
        height: 1px;
        width: 100%;
        background-color: #f9bc02;
      }
    }

    .profession-title-text {
      padding: 0 20px;
    }
  }

  .profession-sub-title {
    font-family: "Arial Normal", "Arial";
    font-weight: 400;
    font-style: normal;
    font-size: 13px;
    line-height: normal;
    color: #868686;
    margin: 5px auto 42px auto;
  }

  .profession-main {
    padding: 0 80px;

    .profession-wrapper {
      .profession-main-item {
        padding-bottom: 32px;

        .profession-main-item-inner {
          text-align: left;

          .profession-item-header {
            margin: 14px 0;

            .profession-item-header-title {
              font-size: 18px;
            }

            .profession-item-header-line {
              margin: 0 12px;
            }

            .profession-item-header-more {
              font-size: 13px;
              color: #868686;
            }

            .profession-item-header-more:hover {
              color: #f9bc02;
              cursor: pointer;
            }
          }

          .profession-item-content {
            width: 16em;
            word-break: keep-all;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
            text-align: left;
            padding: 2px 0;
          }

          .profession-item-content:hover {
            color: #f9bc02;
            cursor: pointer;
          }
        }
      }
    }
  }
}
</style>